<template>
  <div class="main">
    <p @click="doSomething()">点我</p>
    <p>{{a}}</p>
    <!--v-text:保留html标签元素-->
    <!--<p v-text="a"></p>-->
    <!--v-html:去除html标签元素-->
    <p v-html="b"></p>
    <div class="main_content">
      <ul>
        <li v-for="item in items" :class="{finished:item.isFinished}">
          {{item.label}}
        </li>
      </ul>
      <input v-model="newInput" type="text" @keyup.enter="addInput()">
    </div>
  </div>
</template>
<style lang="scss">
  .finished {
    color: red;
  }

  .main {
    padding-top: 40px;
    .main_content {
      width: 100%;
      margin-top: 10px;
      background: paleturquoise;
    }
  }
</style>
<script>
  export default {
    name: 'Message3',
    data() {
      return {
        a: 1,
        b: '输入点击enter添加',
        items: [],
        newInput: ''
      }
    },
    methods: {
      doSomething() {
        this.a++
      },
      addInput() {
        this.items.push({
          label: this.newInput,
          isFinished: false
        });
        this.newInput = ''
      }
    },
    watch: { // 对数据改变时的操作
      'a': function (val, oldVal) {
        console.log(val, oldVal)
      }
    }
  }
</script>
